<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>驴窝日报详情</title>
    <meta name="site" content="http://www.wolfcode.com" />
    <meta name="description" content="骡窝日报,每天最新旅游资讯" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/newsContent.css">
    <link rel="stylesheet" href="/js/share/dist/css/share.min.css">
    <script src="/js/share/dist/js/social-share.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/checkLogin.js"></script>

    <script>
        $(function () {
            var param = getParams();
            var travelId = param.id;
            if (param.id) {
                //获取日报内容
                $.get(baseUrl + "/dailyNews/" + param.id, function (data) {
                    $(".newsDetail").renderValues(data,{
                        getHref:getHref
                    })
                });
                //对评论分页
                var currentPage = 1;
                var arr = [];
                var totalPage;
                var loading = false;
                function query(){
                    if (loading == true) {
                        return;
                    }
                    loading=true;
                    //获取日报评论的分页内容
                    $.get(baseUrl+"/dailyNews/" + param.id+"/comment",{currentPage:currentPage},function (data) {
                        console.log(data);
                        totalPage=data.pages;
                        //合并数据
                        $.merge(arr,data.list);
                        //改变数据格式
                        var json = {list:arr};
                        // 使用jrender 插件渲染数据 到页面
                        $("#comment").renderValues(json,{
                            getHref:getHref
                        });
                        currentPage++;
                        loading=false;
                    });
                };
                query();
                $(window).scroll(function(){
                    if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
                        if (currentPage <= totalPage) {
                            query();
                        }else {
                            $(document).dialog({
                                type : 'notice',
                                infoText: '已经到底啦',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
                //弹出模态框
                $("#commentBtn").click(function () {
                    $("#commentModal").modal("show")
                })
                //添加评论
                $(".btn-save").click(function () {
                    $.post(baseUrl+"/dailyNews/" + param.id+"/comment",{
                        "user.id":user.id,
                        "content":$("#content").val(),
                        "state":1
                    },function (data) {
                        location.reload();
                    })
                })
            }

            //收藏操作:
            //查询收藏该游记的数量
            $.get(baseUrl+"/likesAndCollects"+"/travelCollectNum", {travelId: travelId}, function (data) {
                $('#travelCollect').html(data);
            })
            $('#collectBtn').click(function () {
                if ($("#collectBtn").data('status') == 0) {
                    num = $("#travelCollect").html();
                    num++;
                    $("#travelCollect").html(num);
                    $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                    $("#collectBtn").data('status', 1);
                    $.ajax({
                        url: baseUrl+"/likesAndCollects"+"/travelCollect",
                        type: "post",
                        data: {userId: user.id, travelId: travelId, status: 1},
                        success: function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '收藏成功'
                                });
                            }
                        }
                    })
                } else if ($("#collectBtn").data('status') == 1) {
                    num = $("#travelCollect").html();
                    num--;
                    $("#travelCollect").html(num);
                    $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                    $("#collectBtn").data('status', 0);
                    $.ajax({
                        url: baseUrl+"/likesAndCollects"+"/deleteTravelCollect/"+user.id+"/"+travelId,
                        type: 'DELETE',
                        success: function (data) {
                            $(document).dialog({
                                overlayClose: true,
                                content: '取消收藏成功'
                            });
                        }
                    })
                }
            })
            //收藏回显操作=============================================================================
            if (user) {
                $.get(baseUrl+"/likesAndCollects/travelCollectStatus",{userId: user.id, travelId: travelId}, function (data) {
                    $('#collectBtn').data("status", data);
                    if (data) {
                        $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                    }else{
                        $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                    }
                })
            }
            // ================游记点赞=========================
            // 用于开发游记点赞
            //查询点赞该攻略的数量
            $.get(baseUrl+"/likesAndCollects"+"/travelLikeNum", {travelId: travelId}, function (data) {
                $('#travelLike').html(data);
            })
            // 查询数据库当前用户是否已经对当前游记点赞
            $.get(baseUrl+'/likesAndCollects/travelLikeStatus',{userId: user.id, travelId: travelId}, function (data) {
                $('#likeBtn').data("status", data);
                if (data) {
                    // 1 点赞
                    $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                } else {
                    // 0 不点赞
                    $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                }
            });
            $('#likeBtn').click(function () {
                if ($("#likeBtn").data('status') ==0) {
                    num = $("#travelLike").html();
                    num++;
                    $("#travelLike").html(num);
                    $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                    $("#likeBtn").data('status', 1);
                    // 进行点赞逻辑开发
                    $.ajax({
                        url: baseUrl+"/likesAndCollects"+"/travelLike",
                        type: 'post',
                        data: {userId: user.id, travelId: travelId, status: 1},
                        success: function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '点赞成功'
                                });
                            }
                        }
                    })
                } else if ($("#likeBtn").data('status') == 1) {
                    num = $("#travelLike").html();
                    num--;
                    $("#travelLike").html(num);
                    $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                    $("#likeBtn").data('status', 0);
                    $.ajax({
                        url: baseUrl+"/likesAndCollects"+"/deleteTravelLike/"+user.id+"/"+travelId,
                        type: 'DELETE',
                        success: function (data) {
                            $(document).dialog({
                                overlayClose: true,
                                content: '取消点赞成功'
                            });
                        }
                    })
                }
            })






        })
    </script>


</head>

<body style="background: url('/upload/2.bmp')">
<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type">美图美文</span>
                </div>
                <div class="col-4">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">骡窝官方</span>
                </div>
            </div>
            <div class="social-share"></div>
            <div class="detail">
                <h2 class="title" render-html="title">名人眼中旅行的意义</h2>
                <div class="content" render-html="newsContent.content">
                </div>
            </div>
        </div>
    </div>
    <hr>


    <div class="container d-flex">
        &nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn" data-status="0">
                <span id="travelLike">0</span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa  fa-commenting-o"  id="commentBtn">
                <span></span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-star-o" data-status="0" id="collectBtn">
                <span id="travelCollect">0</span>
            </i>
        </div>
    </div>

    <hr>
    <div id="comment">
        <div render-loop="list">
            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a data-url="userProfiles.html?id=" render-fun="getHref" render-key="list.user.id">
                        <img class="rounded-circle" render-src="list.user.headImgUrl" style="width: 45px;height: 45px">
                    </a>
                </div>
                <div class="col comment-right">
                    <p class="authorName"><span render-html="list.user.nickName">喵喵</span></p>
                    <span class="comment-date" render-html="list.creatTime">2018-07-19</span>
                    <div class="comment-content">
                            <p render-html="list.content">我觉得很好</p>
                    </div>
                </div>
            </div>
            <hr/>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" id="myModalLabel" style="margin-left:10px">
                    评论
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="editForm">
                    <input type="hidden" name="childId">
                    <div class="form-group" >
                        <!--  <label class="col-sm-4 control-label">分类名称：</label>-->
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content" id="content">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-save">发送</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>

</html>